<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!--浏览器兼容模式用最新的文档渲染模式-->
    <meta http-equiv="X-UA-Compatible" content ="IE=edge"/>
    <title>onlinedocs</title>
    <style type="text/css">
      #loading{
        background-color: #17607d;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0px;
        left: 0px;
        margin-top: 0px;
        margin-left: 0px;
      }
      #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
      #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
        -ms-transform: rotate(-135deg); 
          -webkit-transform: rotate(-135deg); 
          transform: rotate(-135deg);
      }
      .object{

        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
        position: absolute;
        border-top: 5px solid #FFF;
        border-bottom: 5px solid transparent;
        border-left:  5px solid #FFF;
        border-right: 5px solid transparent;
        
        -webkit-animation: animate 2s infinite;
        animation: animate 2s infinite;	

        }
      #object_one{
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
        }
                    
      #object_two{
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
        }
          
      #object_three{
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }
      #object_four{
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
        
        }	

      @-webkit-keyframes animate {
      50% {
        -ms-transform: rotate(360deg) scale(0.8); 
          -webkit-transform: rotate(360deg) scale(0.8); 
          transform: rotate(360deg) scale(0.8); 
        }
      }

      @keyframes animate {
      50% {
        -ms-transform: rotate(360deg) scale(0.8); 
          -webkit-transform: rotate(360deg) scale(0.8); 
          transform: rotate(360deg) scale(0.8); 
        }	
      }
    </style>

  </head>
  <body>
      <div id="loading">
        <div id="loading-center">
          <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
          </div>
        </div>
      </div>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>
